import React from 'react';
import './zhishi.scss';
import config from '@/config';
import { Link } from 'react-router-dom';

const Zhishi = () => {
  const list = [
    { left: '血 压', right: '<120/80毫米汞柱' },
    { left: '空腹血糖', right: '<5.5毫摩尔/升' },
    { left: '总胆固醇', right: '<5.2毫摩尔/升' },
    { left: '坏胆固醇', right: '<2.6毫摩尔/升' },
    { left: '好胆固醇', right: '>1.3毫摩尔/升' },
    { left: '甘油三酯', right: '<1.7毫摩尔/升' },
    { left: '促甲状腺激素', right: '<4.0毫摩尔/升' },
    { left: '身体质量指数BMI', right: '18.5-24.9' },
    { left: 'C-反应蛋白', right: '<1.0毫克/升' },
    { left: '睡 眠', right: '每晚7—8小时' },
  ];
  const lists = {
    chun: [
      { time: '2015-08-25', title: '春季护肝 春季如何正确养肝护肝？' },
      { time: '2015-08-22', title: '春季饮食禁忌 春季饮食注意事项' },
      { time: '2015-08-11', title: '春季男人饮食养生 揭男人5大易忽视恶习' },
      { time: '2015-08-05', title: '春季饮食 10种食物让你轻松排毒' },
    ],
    xia: [
      { time: '2015-08-16', title: '夏天吃火锅要注意些什么 夏天吃火锅好吗' },
      { time: '2015-08-15', title: '夏季吃姜好处多 巧用生姜能治这些病' },
      { time: '2015-08-02', title: '夏季吃西瓜最解暑 这7类人吃西瓜要谨慎' },
      { time: '2015-08-01', title: '矿物质的海带是很适合现代人的美容健康食品' },
    ],
    qiu: [
      { time: '2015-08-16', title: '秋季养生食谱 男人这么吃增寿十年' },
      { time: '2015-08-15', title: '秋季补气血的食物 秋季女性吃什么补气血？' },
      { time: '2015-08-11', title: '秋季养生 老人秋季有四怕' },
      { time: '2015-08-05', title: '秋季饮食养生小常识' },
    ],
    dong: [
      { time: '2015-08-11', title: '宝宝咳嗽怎么办 小儿冬季久咳怎么办？' },
      { time: '2015-08-05', title: '养胃的方法 冬季养胃护胃七大禁忌' },
      { time: '2015-09-25', title: '冬季预防咳嗽八个方法 充足睡眠多喝水' },
      { time: '2015-11-25', title: '冬季养生小常识 五个小点远离冬季疾病' },
    ],
  };
  // <Link onClick={() => setValIndexFn(index)} className={valIndex == index?'active':''} key={index} to={val.url}>{val.name}</Link>
  return (
    <div className="zhishi">
      <div className="zhishi-img">
        <div>
          <div>
            <div className="img-title">健康知识大课堂</div>
            <div className="img-body">
              {config.CompanyName}
              为您提供全面的生活保健养生知识和健康小窍门，帮助大家科学养生，为大家带来健康，让每个人都能成为养生健康专家。
            </div>
          </div>
          <div>
            <img src="../src/assets/newBack.jpg" alt="" />
          </div>
        </div>
      </div>

      <div className="zhishi-body">
        <div className="body-left">
          <div>
            <div>
              <div className="left-title">春季健康养生知识</div>
              <div className="left-body">
                {lists.chun.map((val, index) => (
                  <Link className="item" to={'/article?type=chun&index=' + index}>
                    <span>&gt; {val.title}</span> <span>[{val.time}]</span>
                  </Link>
                ))}
              </div>
            </div>
            <div>
              <div className="left-title">夏季健康养生知识</div>
              <div className="left-body">
                {lists.xia.map((val, index) => (
                  <Link className="item" to={'/article?type=xia&index=' + index}>
                    <span>&gt; {val.title}</span> <span>[{val.time}]</span>
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <div>
            <div>
              <div className="left-title">秋季健康养生知识</div>
              <div className="left-body">
                {lists.qiu.map((val, index) => (
                  <Link className="item" to={'/article?type=qiu&index=' + index}>
                    <span>&gt; {val.title}</span> <span>[{val.time}]</span>
                  </Link>
                ))}
              </div>
            </div>
            <div>
              <div className="left-title">冬季健康养生知识</div>
              <div className="left-body">
                {lists.dong.map((val, index) => (
                  <Link className="item" to={'/article?type=dong&index=' + index}>
                    <span>&gt; {val.title}</span> <span>[{val.time}]</span>
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div>
          <table className="zhishi-table" border={1}>
            <tr>
              <td colSpan={2}>春季健康养生知识</td>
            </tr>
            {list.map((val) => (
              <tr>
                <td>{val.left}</td>
                <td>{val.right}</td>
              </tr>
            ))}
          </table>
          <img src="../src/assets/tab1.jpg" className="img"></img>
          <img src="../src/assets/tab2.jpg" className="img"></img>
        </div>
      </div>
    </div>
  );
};

export default Zhishi;
